<template>
	<view class="parent">
		<view class="top">
			<view class="status-bar"></view>
			<view class="title-bar" @click="back()">
				<view class="back">
					<image class='back' :src="getImageUrl('ic_arrow_left_white.png')" mode="widthFix"></image>
				</view>
				<view class="title">VIP会员</view>
			</view>
			<text class="tip1">VIP专属特权</text>
			<view class="tip2">
				<view class="line"></view>
				<view class="text">专享多项特权，彰显尊贵身份</view>
				<view class="line"></view>
			</view>
			<view class="avatar-nick-vip">
				<image class="avatar" :src="user.headPicUrl">
				</image>
				<view class="nick-vip">
					<view class="nick">{{user.nick}}</view>
					<view class="vip">{{vipTip}}</view>
				</view>
				<image :src="getImageUrl('ic_mine_vip.png')" style="width: 60rpx;" mode="widthFix"></image>
			</view>
		</view>

		<scroll-view class="content" scroll-y>
			<view class="content-label">开通VIP会员</view>
			<view class="vip-list">
				<view class="item-vip" :class="{active: selectIndex == index}" v-for="(item, index) in list"
					:key="index" @click="selectIndex = index">
					<view class="month" :class="{active: selectIndex == index}">{{monthText(item)}}</view>
					<view class="price">
						<view class="currency" :class="{active: selectIndex == index}">￥</view>
						<view class="text" :class="{active: selectIndex == index}">{{item.money}}</view>
						<view class="origin" :class="{active: selectIndex == index}">{{item.moneyBefore}}</view>
					</view>
					<view class="preferential" :class="{active: selectIndex == index}">
						立省{{item.moneyBefore - item.money}}元</view>
					<view class="vip-top">{{item.keyWord}}</view>
				</view>
			</view>
			<view class="content-label">会员特权6项</view>
			<view class="list">
				<view class="item-tag" v-for="(item, index) in tags" :key="index">
					<image class="pic" :src="item.pic"></image>
					<view class="title">{{item.title}}</view>
					<view class="sub">{{item.sub}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="bottom" @click="showDialogPay">立即开通</view>

		<uni-popup type="bottom" ref="pay">
			<pay payType="2" :payMoney="list[selectIndex].money" :payId="list[selectIndex].id" @close='closeDialogPay'></pay>
		</uni-popup>
	</view>
</template>

<script>
    import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				tags: [{
						pic: this.getImageUrl('vip_icon1.png'),
						title: '钻石礼包',
						sub: '赠送钻石'
					},
					{
						pic: this.getImageUrl('vip_icon2.png'),
						title: '免费视频卡',
						sub: '每日可领1分钟'
					},
					{
						pic: this.getImageUrl('vip_icon3.png'),
						title: '尊贵标识',
						sub: '身份象征'
					},
					{
						pic: this.getImageUrl('vip_icon4.png'),
						title: '超闪昵称',
						sub: '突出显示'
					},
					{
						pic: this.getImageUrl('vip_icon5.png'),
						title: '专属头像框',
						sub: '与众不同'
					},
					{
						pic: this.getImageUrl('vip_icon6.png'),
						title: '聊天气泡',
						sub: '专属气泡'
					},
				],
				list: [],
				user: {},
				vipTip: 'VIP会员未开通',
				selectIndex: 0,
				selectItem:{}
			}
		},
		onLoad() {
			this.requestVipList();
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			back() {
				RouteUtil.back()
			},
			monthText(item) {
				let text = '月会员'
				if (3 == item.month) {
					text = '季会员'
				} else if (6 == item.month) {
					text = '半年会员'
				} else if (12 == item.month) {
					text = '年会员'
				}
				return text;
			},
			showDialogPay() {
				this.$refs.pay.open()
			},
			closeDialogPay() {
				this.$refs.pay.close()
			},
			requestUser() {
				uni.$http.getUser().then(res=>{
					this.user = res.data;
					if (0 == this.user.vip) {
						this.vipTip = '已开通VIP,' + this.user.vipTime + '到期';
					}
				})
			},
			requestVipList() {
				uni.$http.get('/api/vipPackage/list').then(res=>{
					this.list = res.data;
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.parent {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #252331;

			.status-bar {
				height: var(--status-bar-height);
				width: 100%;
			}

			.title-bar {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: start;
				width: 100%;
				height: 80rpx;

				.back {
					width: 80rpx;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					image {
						width: 30rpx;
					}
				}

				.title {
					position: absolute;
					top: auto;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					color: #fff;
				}
			}

			.tip1 {
				font-size: 50rpx;
				color: #fdcb98;
				font-weight: bold;
				font-style: italic;
			}

			.tip2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #f8f0e3;

				.line {
					width: 100rpx;
					height: 1rpx;
					background-color: #f8f0e3;
					border-radius: 2rpx;
					opacity: 0.5;
				}

				.text {
					margin: 0 10rpx;
				}
			}

			.avatar-nick-vip {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				padding: 30rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				background: linear-gradient(to right, #3b3a4c, #292732);
				border-top: 0.5px solid #535262;
				border-left: 0.5px solid #535262;
				border-right: 0.5px solid #535262;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;

				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.nick-vip {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin: 0 20rpx;

					.nick {
						font-size: 26rpx;
						color: #f6dac2;
					}

					.vip {
						font-size: 22rpx;
						color: #adadb7;
						margin-top: 10rpx;
					}
				}
			}
		}
		.content {
			flex: 1;
			overflow-y: auto; //重要

			.content-label {
				font-size: 28rpx;
				color: #000000;
				font-weight: 500;
				margin-left: 30rpx;
				margin-top: 30rpx;
			}

			.list {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 15rpx;

				.item-tag {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					padding: 15rpx;
					box-sizing: border-box;

					.pic {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.title {
						font-size: 24rpx;
						color: #000000;
						margin-top: 15rpx;
					}

					.sub {
						font-size: 24rpx;
						color: #9999a5;
						margin-top: 15rpx;
					}
				}
			}

			.vip-list {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				padding: 0 30rpx;

				.item-vip {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 30%;
					box-sizing: border-box;
					padding: 30rpx;
					background-color: #fff;
					border-radius: 15rpx;
					margin: 15rpx;
					box-shadow: 5px 5px 5px #eaeaea;

					.month {
						font-size: 28rpx;
						color: #000000;
					}

					.month.active {
						color: #e4ac4f;
					}

					.price {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						margin-top: 30rpx;

						.currency {
							font-size: 28rpx;
							color: #000000;
						}

						.currency.active {
							color: #e4ac4f;
						}

						.text {
							font-size: 50rpx;
							color: #000000;
							font-weight: 500;
							margin: 0 10rpx;
						}

						.text.active {
							color: #e4ac4f;
						}

						.origin {
							font-size: 28rpx;
							color: #9999a1;
							text-decoration: line-through;
						}

						.origin.active {
							color: #e4ac4f;
						}
					}

					.preferential {
						margin-top: 30rpx;
						padding: 10rpx 15rpx;
						font-size: 24rpx;
						color: #9a999f;
					}

					.preferential.active {
						border-radius: 15rpx;
						color: #aa7318;
						background: linear-gradient(to right, #eebc77, #fde7ad);
					}

					.vip-top {
						position: absolute;
						top: -15rpx;
						left: -2rpx;
						background: linear-gradient(to right, #f0be79, #fee5a3);
						padding: 8rpx 15rpx;
						font-size: 20rpx;
						color: #886112;
						border-top-left-radius: 20rpx;
						border-top-right-radius: 5rpx;
						border-bottom-left-radius: 5rpx;
						border-bottom-right-radius: 20rpx;
					}
				}

				.item-vip.active {
					border: 1px solid #cfa865;
					background-color: #faf6ed;
				}
			}
		}

		.bottom {
			height: 100rpx;
			line-height: 100rpx;
			margin: 10rpx 30rpx;
			background-color: #272733;
			border-radius: 50rpx;
			color: #f5deac;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>